- [1.5. HTML-ссылки](#15-html-ссылки)
  - [Номер порта ТСР](#номер-порта-тср)
  - [2.2. Относительный путь](#22-относительный-путь)
  - [5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты](#5-как-сделать-ссылку-на-телефонный-номер-скайп-или-адрес-электронной-почты)
  - [Атрибуты ссылок](#атрибуты-ссылок)

## [1.5. HTML-ссылки](https://html5book.ru/hyperlinks-in-html/)

### Номер порта ТСР
, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:

- 21 — FTP
- 23 — Telnet
- 70 — Gopher
- 80 — HTTP



### 2.2. Относительный путь
Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.

Относительный путь содержит следующие компоненты:

папка (имя папки, указывающей путь к файлу);
файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:

- `/` указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
- `./` указывает на текущую папку
- `../` подняться на одну папку (директорию) выше

Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.

### 5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
У ссылок появились новые возможности — по клику можно не только переходить на другие страницы и скачивать файлы, но и совершать звонки на телефоны, отправлять сообщения или звонить по скайпу.

```html
ссылка на телефонный номер
<a href="tel:+74951234567">+7 (495) 123-45-67</a>

ссылка на адрес электронной почты 
<a href="mailto:example@mail.ru">example@mail.ru</a>

ссылка на скайп (позвонить)
<a href="skype:имя-пользователя?call">Skype</a>

ссылка на скайп (открыть чат)
<a href="skype:имя-пользователя?chat">Skype</a>

ссылка на скайп (добавить в список контактов)
<a href="skype:имя-пользователя?add">Skype</a>

ссылка на скайп (отправить файл)
<a href="skype:имя-пользователя?sendfile">Skype</a>
```

### Атрибуты ссылок

| Атрибут                                  | Описание, принимаемое значение           |
|------------------------------------------|------------------------------------------|
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px; color: rgb(56, 186, 199);">download</kbd> | Дополняет атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">href</kbd><span> </span>и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения:<p style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 20px; padding: 0px;"></p><p style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 20px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;a href="/images/logo.png" download&gt;&lt;img src="/images/logo.png" alt="logo"&gt;&lt;/a&gt;</kbd></p><p style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 20px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;a href="/images/logo.png" download="logo"&gt;&lt;img src="/images/logo.png" alt="logo"&gt;&lt;/a&gt;</kbd></p><p style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 20px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;a href="files/20022014.pdf" download="Отчет Февраль 2014.pdf"&gt;Загрузить отчет за Февраль 2014&lt;/a&gt;</kbd></p> |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">href</kbd> | Значением атрибута является URL-адрес документа, на который указывается ссылка. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">hreflang</kbd> | Определяет язык связанного веб-документа. Используется только вместе с атрибутом<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">href</kbd>. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих<span> </span><a href="http://www.w3schools.com/tags/ref_language_codes.asp" class="site" target="_blank" rel="noopener noreferrer" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; text-decoration: none; box-shadow: rgb(95, 112, 178) 0px -2px inset; color: rgb(48, 48, 48);">код языка</a>, например:<p style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 20px; padding: 0px;"></p><p style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 20px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;a href="http://www.anysite.ru" hreflang="en"&gt;Anysite&lt;/a&gt;</kbd></p> |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px; color: rgb(56, 186, 199);">media</kbd> | Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px; color: rgb(56, 186, 199);">ping</kbd> | Отслеживает URL-адреса ресурсов, по которым переходил пользователь. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">rel</kbd> | Дополняет атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">href</kbd><span> </span>информацией об отношении между текущим и связанным документом. Принимаемые значения:<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">alternate</kbd><span> </span>— ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">author</kbd><span> </span>— ссылка на автора документа.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">bookmark</kbd><span> </span>— постоянный URL-адрес, используемый для закладок.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">help</kbd><span> </span>— ссылка на справку.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">license</kbd><span> </span>— ссылка на информацию об авторских правах на данный веб-документ.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">next/prev</kbd><span> </span>— указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">nofollow</kbd><span> </span>— запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">noreferrer</kbd><span> </span>— указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">prefetch</kbd><span> </span>— указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">search</kbd><span> </span>— указывает, что целевой документ содержит инструмент для поиска.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">tag</kbd><span> </span>— указывает ключевое слово для текущего документа. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">target</kbd> | Указывает на то, в каком окне должен открываться документ, к которому ведет ссылка. Принимает следующие значения:<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">_self</kbd><span> </span>— страница загружается в текущее окно;<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">_blank</kbd><span> </span>— страница открывается в новом окне браузера;<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">_parent</kbd><span> </span>— страница загружается во фрейм-родитель;<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">_top</kbd><span> </span>— страница загружается в полное окно браузера. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">type</kbd> | Указывает<span> </span><a href="http://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_MIME-%D1%82%D0%B8%D0%BF%D0%BE%D0%B2" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; text-decoration: none; box-shadow: rgb(95, 112, 178) 0px -2px inset; color: rgb(48, 48, 48);">MIME-тип</a><span> </span>файлов ссылки, т.е. расширение файла, носит больше справочную информацию. |



@@ html5book.ru point this learn
